<template>
  <div>
    <div>
      <van-nav-bar title="校易宝">
       <van-icon name="search" slot="right" @click="onClickRight"/>
      </van-nav-bar>
    </div>
    <div>
      <van-notice-bar :scrollable="true" mode="closeable">
          第十五届“华软杯”足球赛火热进行中，首轮网络系2:1险胜游戏系。
      </van-notice-bar>
    </div>
    <center><van-loading color="black" size="100px" v-show="loading"/></center>
    <!--改一下UI，大致是勾goods表里的数据v-for列表，然后点击每一个就进入每一个:id的页面，页面详情有评论，点赞功能   -->    
    <div v-for="(card,index) in cards" :key="index">
        <van-card
          v-bind:title="card.goods_name"
          v-bind:desc="card.goods_desc"  
          v-bind:num="card.goods_num"
          v-bind:price="card.goods_price"
          :thumb="card.goods_picture"
        >
       
          <div slot="footer">
            <van-button size="normal" type="primary" @click="goodDetails(index)">详情</van-button>
          </div>
        </van-card>
      
    </div>
  <br><br><br>
  </div>
</template>
<script>
import axios from "axios";
export default {
data() {
    return {
      active: 0,
      loading:true
    }
  },
   computed:{
          cards(){
             return this.$store.state.cards
          }
 },
 mounted:function(){
     this.load()
  },
 
   methods: {
      load(){
      setTimeout(() => {
         axios({
            method: "post",
            url: "http://localhost:3000/Goods",
            data: {
            cards: this.$store.state.cards
            },
            headers: {
            "Content-Type": "text/plain"
            }
        }).then(result => {

             console.log(result);
             this.$store.state.cards=result.data
             this.loading=false;
        })
    
      }, 1000);
      
   },
    onClickRight() {
      this.$router.push('/searchSome');
    },
    goodDetails(index){
      this.$store.commit('gooddetail',index)   
         
      this.$router.push({path:'/goodMsg',})

    }
  }
    
}
</script>

